<template>
  <div>
    <common-head title="更新联系人" />
    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field
          :rules="[
            {
              required: true,
              message: '联系人必传',
            },
          ]"
          v-model="contact.linkMan"
          label="姓名"
        />
        <van-field
          :rules="[
            {
              required: true,
              message: '联系人必传',
            },
            {
              pattern: /\d{11}/,
              message: '请输入正确的手机号'
            }
          ]"
          v-model="contact.mobile"
          type="tel"
          label="手机号"
        />
        <van-cell title="地区" is-link :value="region" @click="showArea" />
        <van-field
          :rules="[
            {
              required: true,
              message: '联系人必传',
            },
          ]"
          v-model="contact.address"
          label="详细地址"
        />
        <van-field v-model="contact.code" type="number" label="邮政 编码" />
        <van-cell center title="设置默认地址">
          <template #right-icon>
            <van-switch v-model="contact.isDefault" size="24" />
          </template>
        </van-cell>
      </van-cell-group>
      <van-button
        type="primary"
        native-type="submit"
        style="margin-top: 20px"
        size="large"
        >确认</van-button
      >
    </van-form>
    <!-- 省市区弹出层 -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-area title="标题" :area-list="areaList" @confirm="choseArea" />
    </van-popup>
    <!-- /省市区弹出层  -->
  </div>
</template>

<script>
import CommonHead from '_components/CommonHead'
import { areaList } from '@vant/area-data'
import { fetchContactDetail, updateContact } from '_api'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  name: 'contactUpdate',
  data () {
    return {
      contact: {
        linkMan: '', // 联系人
        mobile: '', // 手机号
        address: '',
        provinceId: '',
        cityId: '',
        isDefault: false,
        districtId: '',
        code: ''
      },
      region: '省/市/区',
      show: false,
      areaList: areaList
    }
  },
  created () {
    this.fetchContact()
  },
  methods: {
    fetchContact () {
      // 获取编辑联系人的详情数据
      fetchContactDetail({
        id: this.$route.query.id,
        token: getToken()
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.contact = res.data.data.info
          this.region = this.contact.provinceStr + '/' + this.contact.cityStr + '/' + this.contact.areaStr
        }
      })
    },
    onSubmit () {
      // 更新联系人
      updateContact({
        ...this.contact,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast({
            type: 'success',
            message: '修改成功',
            duration: 1000,
            onClose: () => {
              this.$router.replace('/contactLists')
            }
          })
        }
      })
    },
    showArea () {
      // 点击显示省市区三级联动
      this.show = true
    },
    choseArea (area) {
      // 点击省市区三级联动确认
      console.log(area)
      this.contact.provinceId = area[0].code
      this.contact.cityId = area[1].code
      this.contact.districtId = area[2].code
      this.region = area[0].name + '/' + area[1].name + '/' + area[2].name
      this.show = false
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.van-cell::after {
  border-bottom: 0.025rem solid rgb(218, 215, 215);
}
</style>
